<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华联</title>
    <meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content=yes name=apple-mobile-web-app-capable>
    <meta content=yes name=apple-touch-fullscreen>
    <meta content="telephone=no,email=no" name=format-detection>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 20px;
            height: 100%;
        }
        body{
            height: 100%;
            overflow: hidden;
            text-align: center;
        }
        h2{
            font-size: 2rem;
            text-align: center;
            margin-top: 6rem;
            width: 100%;
            height: 3rem;
            color: #dd047e;
        }
        input,#searchBtn{
            width: 80%;
            height: 4rem;
            margin-top: 2rem;
            outline: none;
            border: 2px solid #dd047e;
            border-radius:4px;
            font-size: 1.5rem;
            color: #999;
            text-indent: 10px;
        }
        #searchBtn{
            color: #999;
        }
        #searchBtn{
            width: 22%;
            color: #fff;
            background:#dd047e ;
            height: 4.2rem;
            text-indent: 0 !important;
        }
        #phone{
            width: 56%;
            margin-right: 8px;
        }
        #btn{
            color: #dd047e;
            background: #45177d;
        }
        .layui{
            width: 16rem;
            height: 6rem;
            background: rgba(0,0,0,0.5);
            color: #fff;
            font-size: 1.4rem;
            text-align: center;
            line-height: 6rem;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -8rem;
            margin-top: -4rem;
            display: none;
        }
        .layui2{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.3);
        }
        .layui2 .con{
            width: 80%;
            height: 12rem;
            position: absolute;
            left: 10%;
            top: 50%;
            margin-top: -6rem;
            border: 1px solid #45177d;
            border-radius: 6px;
            background: #fff;
        }
        .layui2 .con p{
            margin-top: 1rem;
            line-height: 2rem;
            font-size: 1.2rem;
            color: #45177d;
        }
        .layui2 .con button{
            margin-top: 4px;
            width: 5rem;
            height: 3rem;
            border-radius: 4px;
            border-color: #45177d;
            color: #dd047e;
        }
        .regBox,.luBox,.duiBox,.jiNo{
            display: none;
        }
        .layui2 .con .reg,.layui2 .con .lu,.layui2 .con .dui,.layui2 .con .back{
            border: none;
            background: #dd047e;
            color:#45177d;
        }
        #box{
            margin-top: 4rem;
            height: 50rem;
            overflow: auto;
            position: relative;
        }
        #box .list{
            width: 9rem;
            float: left;
            margin-bottom: 2rem;
            margin-left: 1.15rem;
        }
        #box .list p{
            font-size: 1.2rem;
            color:#dd047e;
            text-align: left;
        }
        #box .list img{
            width: 9rem;
            height: 9rem;
        }
        .clearFix:after{
            content: '';
            display: block;
            clear: both;
        }
        .mark{
            width: 100%;
            height: 100rem;
            background:rgba(0,0,0,0.4);
            position: absolute;
            left: 0;
            top: 0;

        }
        .points{
            color: #fff;
            font-size: 1.6rem;
            margin: 10px;
            display: none;
        }
    </style>
    <script>
        function fn() {
            document.documentElement.style.fontSize=document.documentElement.clientWidth*20/640+'px';
        }
        document.addEventListener('DOMContextLoaded',fn,false)
        window.addEventListener('resize',fn);
        window.addEventListener('orientationchange',fn);
        window.addEventListener('load',fn);

    </script>
</head>
<body>
    <h2>积分兑换</h2>
    <input type="number" id="phone" placeholder="会员手机号码"><button id="searchBtn">查询</button>
    <div id="box" class="clearFix">
        <div class="mark" ></div>
        <p class="points">总积分：<span></span></p>

    </div>


    <div id="yes" class="layui">
        注册成功
    </div>
    <div class="layui2 regBox">
        <div class="con">
            <p>该用户还未注册</p>
            <p>是否要代为用户注册?</p>
            <p>
                <button class="reg">是</button>
                <button class="regNo">取消</button>
            </p>
        </div>
    </div>
    <div class="layui2 luBox">
        <div class="con">
            <p>已经兑换完毕</p>
            <p>是否继续录入</p>
            <p>
                <button class="lu">是</button>
                <button class="luNo">取消</button>
            </p>
        </div>
    </div>
    <div class="layui2 duiBox">
        <div class="con">
            <p>您确定兑换<strong>xxx</strong></p>
            <p>消耗<b>1111</b>积分？</p>
            <p>
                <button class="dui">是</button>
                <button class="duiNo">取消</button>
            </p>
        </div>
    </div>
    <div class="layui2 jiNo">
        <div class="con">
            <p>兑换该商品</p>
            <p>您的积分不足</p>
            <p>
                <button class="back">返回</button>
            </p>
        </div>
    </div>
</body>
</html>
<script src="../../../utils/zepto.min.js"></script>
<script src="../../../utils/baseUrl.js"></script>
<script>
    $('#searchBtn').click(function () {
        $.ajax({

            url:baseUrl+'/user?phone='+$('#phone').val()
            ,dataType:"json"
            ,headers:{handlerType:"login"}
            ,type:'post'
            ,success:function (res) {
                console.log(res.code)
                if(res.code==1){
                    $('.mark').css('display','none');
                    $('.points').css('display','block').find('span').text(res.points)

                }else{
                    $('.regBox').css('display','block');
                    $('#phone').val('');
                }

            }
        })
    });

    $('.regNo').click(function () {
        $('.regBox').css('display','none');
    });

    $('.reg').click(function () {
        window.location.href='register2.html';
    });

    $.ajax({
        type:'post',
        headers:{
            'type':'获取商品信息的方法',
            //'token':window.localStorage.getItem('token')
        },
        url:baseUrl+'/mgr',
        dataType:"json",
        success:function (res) {
            $('.list').remove();
            for(var i=0;i<res.data.length;i++){

                $('#box').append(`
                    <div class="list" data-id="${res.data[i].id}">
                        //缩略图
                        <img src="${baseUrl+'/img/'+res.data[i].thumbnail}" alt="">
                        <p>${res.data[i].name}</p>
                        <p>规格：${res.data[i].specs}</p>
                        <p>数量：${res.data[i].num}</p>
                        <p>积分：<span>${res.data[i].points}</span></p>
                    </div>
                `)
            }


        }
    });


    var id;
    var fen;
    $('#box').on('click','.list',function () {
        $('.duiBox').css('display','block');
        $('.duiBox strong').text($(this).find('p').eq(0).text())
        $('.duiBox b').text($(this).find('p').eq(3).find('span').text());
        fen=$(this).find('p').eq(3).find('span').text();
        id=$(this).attr('data-id');
    });

    $('.duiNo').click(function () {
        $('.duiBox').css('display','none');
    })

    $('.dui').click(function () {
        $.ajax({
            type:'post',
            headers:{
                'type':'用户兑换积分的操作',
               // 'token':window.localStorage.getItem('token')
            },
            data:{
                phone:$('#phone').val(),
                goodsId:id,
            },
            dataType:"json",
            url:baseUrl+'/user',
            success:function (res) {
                $('.duiBox').css('display','none');
                if(res.code==1){
                    $('.luBox').css('display','block');
                    $('.points span').text($('.points span').text()-fen)
                }else{
                    $('.jiNo').css('display','block');
                }
            }
        });
    });
    $('.lu').click(function () {
        $('.luBox').css('display','none');
    });
    $('.luNo').click(function () {
        window.location.href='/pages/operation.html';
    });
    $('.back').click(function () {
        $('.jiNo').css('display','none');
    })
</script>







